<script lang="ts" setup>
import { computed, reactive } from 'vue'

const props = defineProps({
  fixed: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '暂无数据'
  },
  height: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: ''
  }
})
const boxStyle = computed(() => {
  return props.height ? { minHeight: props.height } : {}
})

</script>

<template>
  <div :class="['no-data-box',fixed?'no-data-box-fixed':'' ]"
       :style="boxStyle">
    <div :class="['img-box',size==='small'?'img-box-small':'']">
      <img :src="`./assets/project/no-data.png`" />
      <span v-if="title" class="img-lb">{{ title }}</span>
      <slot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.no-data-box-fixed{
  @include abs-group();
}

.no-data-box{
  @include ver-group(center,center) ;
  flex:none;
  width:100%;
  height:100%;

  .img-box{
    @include ver-group(center) ;
    flex:none;
    pointer-events: none;
    img{
      flex:none;
    }
    .img-lb{
      flex:none;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,0.25);
      line-height: 20px;
      vertical-align: middle;
      margin-top: 8px;
    }
  }

  .img-box-small{
    img{
      height:40px;
      max-width: 40px;
    }
  }
}

</style>
